<template>
	<view>
		<block>
			<view class="flex-row sort-bar sort-bar-fixed">
				<block v-for="(item,index) in selectList" :key='index'>
					<view @tap="selectClick(index)" :class="item!=='区域' && item!=='价格' && item!=='面积' && item!=='户型'?'active':''" class="flex-grow-1 flex-y-center flex-x-center flex-row sort-item">
						<view class="flex-y-center">{{item}}</view>
						<view class="flex-y-center sort-icon-box">
							<view>
								<view v-if="item!=='区域' && item!=='价格' &&item!=='面积' && item!=='户型'">
									<image class="sort-icon-up" src="/static/icon-sort-up-active.png"></image>
								</view>
								<view v-else>
									<image class="sort-icon-up" src="/static/icon-sort-down.png"></image>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</block>

		<view @tap="maskClick" catchtouchmove="true" v-if="show_select" class="mask">
		</view>
		<view catchtouchmove="true" v-if="show_select" class="content">
			<view v-if="selectIndex==0" class="selectContent">
				<scroll-view :scroll-top="selectAreaIndex*44" class="areaBox" scroll-y="true" style="max-height:500upx;">
					<block v-for="(item,index) in areaList" :key="index">
						<view class="selectItem" @tap.stop="selectArea(index)">
							{{item}}
						</view>
					</block>
				</scroll-view>
			</view>
			<view v-if="selectIndex==1" class="selectContent">
				<scroll-view :scroll-top="selectPriceIndex*44" class="priceScroll" scroll-y="true" style="max-height:500upx;">
					<block v-for="(item,index) in priceList" :key="index">
						<view class="selectItem" :class="selectPriceIndex===index?'active':''" @tap.stop="selectPrice(index)">
							{{item}}
						</view>
					</block>
				</scroll-view>
			</view>
			<view v-if="selectIndex==2" class="selectContent">
				<scroll-view class="mgScroll" :scroll-top="selectMjIndex*44" scroll-y="true" style="max-height:500upx;">
					<block v-for="(item,index) in m_j_List" :key="index">
						<view class="selectItem" :class="selectMjIndex===index?'active':''" @tap.stop="selectMj(index)">
							{{item}}
						</view>
					</block>
				</scroll-view>
			</view>
			<view v-if="selectIndex==3" class="selectContent">
				<scroll-view class="mgScroll" :scroll-top="selectMjIndex*44" scroll-y="true" style="max-height:500upx;">
					<block v-for="(item,index) in h_x_List" :key="index">
						<view class="selectItem" :class="selectHxIndex===index?'active':''" @tap.stop="selectHx(index)">
							{{item}}
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<house-list @toDetails="toDetails" :item="item" v-for="(item,index) in houseList" :key="index"></house-list>

		<view class="no_data" v-if="show_no_data">---- 暂无相关房源信息 ----</view>
		<view v-if="show_loading" class="" style="text-align: center;height: 100upx;line-height: 100upx;color:#454545;font-size: 24upx">
			正在加载中····
		</view>
		<view v-if="show_no_more" class="" style="text-align: center;height: 100upx;line-height: 100upx;color:#454545;font-size: 24upx">
			----亲~已经到底了 ----
		</view>

	</view>
</template>

<script>
	var globleList = ['区域', '价格', '面积', '户型'];
	import {
		URI_GETHOUSELIST
	} from '../../utils/api.js'
	import HouseList from '../../components/HouseList.vue'
	export default {
		name: "searchResult",
		components: {
			HouseList
		},
		data() {
			return {
				options: {},
				houseList: [],
				page: 1,
				pageSize: 10,
				label: '',
				text: '正在加载····',
				sw: true, //控制滚动到底部是否加载
				show_loading: false,
				show_no_more: false,
				show_no_data: false,
				selectList: globleList,
				show_select: false,
				selectIndex: 0,
				click: -1,
				areaList: ['不限', '孝南'],
				selectAreaIndex: -1,
				checklistPrice: [],
				priceList: ['不限', '10万以下', '10-15万', '15-20万', '20-30万', '30-40万', '40-60万', '60-100万', '100万以上'],
				priceList2: ['不限', '200以下', '200-400', '400-700', '700-1000', '1000-1500', '1500-2000', '2000-3000', '3000以上'],
				selectPriceIndex: -1,
				checklistMJ: [],
				m_j_List: ['不限', '50㎡以下', '50-70㎡', '70-90㎡', '90-110㎡', '110-130㎡', '130-150㎡', '150-200㎡', '200-300㎡', '300㎡以上'],
				selectMjIndex: -1,
				checklistHx: [],
				h_x_List: ['不限', '一室', '两室', '三室', '四室', '五室', ' 五室以上'],
				selectHxIndex: -1,
				quyu: '',
				mianji: '',
				totalPrice: '',
				huxing: '',
				key: ''
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.key
			});
			this.key = options.key;
			if (options.label == 0) {
				this.label = '二手房'
			} else if (options.label == 1) {
				this.label = '租房'
			} else if (options.label == 2) {
				this.label = '新房'
			}
			this.getHouseList();
		},
		onReachBottom() {
			// console.log('bottom');
			if (this.sw) {
				this.page = this.page + 1;
				this.getMoreHouseList()
			}
		},
		onShow() {
			console.log('onshow');
			globleList = ['区域', '价格', '面积', '户型'];
			this.selectList = globleList;
		},
		methods: {
			selectClick(index) {
				if (this.click !== index) {
					this.show_select = true;
					this.selectIndex = index;
					this.click = index;
				} else {
					this.setCommen()
				}
			},
			maskClick() {
				this.setCommen()
			},
			setCommen() {
				this.click = -1;
				this.show_select = false;
			},
			selectArea(index) {
				this.selectAreaIndex = index;
				let selectResult = this.areaList[index];
				// console.log(selectResult)
				if (selectResult == '不限') {
					globleList[0] = "区域";
					this.selectList = globleList;
					this.quyu = '';
					this.getHouseList();
					this.setCommen()
				} else {
					globleList[0] = selectResult;
					this.selectList = globleList;
					this.quyu = selectResult;
					this.getHouseList();
					this.setCommen();
				}
			},
			selectPrice(index) {
				this.selectPriceIndex = index
				let selectResult = this.priceList[index];
				if (selectResult == '不限') {
					globleList[1] = '价格';
					this.selectList = globleList;
					this.totalPrice = '';
					this.getHouseList();
					this.setCommen()
				} else {
					globleList[1] = selectResult;
					this.selectList = globleList;
					if (selectResult === '10万以下') {
						this.totalPrice = '0-9.9'
					} else if (selectResult === '100万以上') {
						this.totalPrice = '100-1000000000'
					} else {
						this.totalPrice = selectResult.substr(0, selectResult.length - 1)
					}
					this.getHouseList();
					this.setCommen()
				}
			},
			selectMj(index) {
				this.selectMjIndex = index
				let selectResult = this.m_j_List[index];
				// console.log(selectResult)
				if (selectResult == '不限') {
					globleList[2] = "面积";
					this.selectList = globleList;
					this.mianji = '';
					this.getHouseList();
					this.setCommen()
				} else {
					globleList[2] = selectResult;
					this.selectList = globleList;
					if (selectResult === '50㎡以下') {
						this.mianji = '0-49.9'
					} else if (selectResult === '300㎡以上') {
						this.mianji = '300-10000';
					} else {
						this.mianji = selectResult.substr(0, selectResult.length - 1)
					}
					this.getHouseList();
					this.setCommen()
				}
			},
			selectHx(index) {
				this.selectHxIndex = index;
				let selectResult = this.h_x_List[index];
				if (selectResult == '不限') {
					globleList[3] = "户型";
					this.selectList = globleList;
					this.huxing = '';
					this.getHouseList();
					this.setCommen()
				} else {
					globleList[3] = selectResult;
					this.selectList = globleList;
					this.setCommen();
					if (selectResult === '一室') {
						this.huxing = '1室';
					} else if (selectResult === '两室') {
						this.huxing = '2室';
					} else if (selectResult === '三室') {
						this.huxing = '3室';
					} else if (selectResult === '四室') {
						this.huxing = '4室';
					} else if (selectResult === '五室') {
						this.huxing = '5室';
					} else {
						this.huxing = '6室';
					}
					this.getHouseList();
				}
			},
			getHouseList() {
				this.page = 1;
				this.$ajax.get(URI_GETHOUSELIST, {
					page: this.page,
					pageSize: this.pageSize,
					houseNew: this.label,
					key: this.key,
					quyu: this.quyu,
					mianji: this.mianji,
					totalPrice: this.totalPrice,
					huxing: this.huxing,
				}).then(res => {
					this.houseList = res.data.data;
					this.show_no_more = false;
					if (res.data.data.length > 0 && this.houseList) {
						this.show_no_data = false;
						this.sw = true
					} else {
						this.show_no_data = true;
					}
				});
			},
			getMoreHouseList() {
				this.show_loading = true;
				this.$ajax.get(URI_GETHOUSELIST, {
					page: this.page,
					pageSize: this.pageSize,
					houseNew: this.label,
					key: '',
					quyu: this.quyu,
					mianji: this.mianji,
					totalPrice: this.totalPrice,
					huxing: this.huxing,
				}).then(res => {
					this.houseList = this.houseList.concat(res.data.data)
					this.show_loading = false;
					this.sw = true;
					if (res.data.data.length < this.pageSize) {
						this.sw = false;
						this.show_no_more = true;
					}
				})
			},
			toDetails(id, title) {
				uni.navigateTo({
					url: "/pages/houseDetail/houseDetail?id=" + id + "&title=" + title
				})
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
		padding-top: 88upx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .2);
		z-index: 98;
	}

	.content {
		width: 100%;
		height: 500upx;
		position: fixed;
		top: 78upx;
		left: 0;
		background: #fff;
		z-index: 110;
		border-top: 2upx solid #f2f2f2;
		padding-left: 28upx;
	}

	.selectItem {
		height: 88upx;
		line-height: 88upx;
		color: #3d3d3d;
		border-bottom: 2upx solid #f2f2f2;
	}

	.selectItem.active {
		color: #ff474f;
	}

	.priceScroll .selectItem:last-child {
		border: none;
	}

	.mgScroll .selectItem:last-child {
		border: none;
	}

	.hxScroll .selectItem:last-child {
		border: none;
	}



	.sort-bar-fixed {
		position: fixed;
		left: 0;
		top: 0upx;
		width: 100%;
		background: #fff;
		z-index: 100;
	}


	.sort-bar {
		height: 88upx;
		border-bottom: 1upx solid #c7c7c7;
	}

	.sort-item {
		color: #3d3d3d;
	}

	.sort-item.active {
		color: #ff474f;
	}

	.sort-item .sort-icon-box {
		margin-left: 15upx;
	}

	.sort-item .sort-icon-up,
	.sort-item .sort-icon-down {
		width: 18upx;
		height: 10upx;
		display: block;
	}

	.sort-item .sort-icon-up {
		margin-top: 5upx;
	}
</style>
